<template>
  <div class="goods_list" v-loading="loading">
    <el-form class="boss-form" inline ref="form" label-width="80px">
      <el-form-item label="商品名称">
        <el-input class="boss_input" v-model="goodData.search.goodsName"
                  clearable placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="厂家">
        <el-input class="boss_input" v-model="goodData.search.factoryName"
                  clearable placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearchClick">搜索</el-button>
        <el-button @click="onResetClick">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="outerTable">
      <div style="display: flex">
        <el-button type="primary" @click="onAddGoodsClick" style="margin-right: 20px">新增商品</el-button>
      </div>

      <el-table ref="tableRef" :data="goodData.list" :height="tableHeight">
        <el-table-column fixed="left" type="index" label="#" width="50" />
        <el-table-column label="商品" prop="goodsImg">
          <template #default="{row}">
            <img style="width: 72px; height: 72px" :src="row.goodsImg" @click="onShowImgClick(row.goodsImg)" />
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="goodsSpec" label="商品规格" />
        <el-table-column prop="factoryName" label="厂家" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="modifyTime" label="修改时间" />
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="{row}">
            <Link label="编辑" @click="onEditClick(row)" :underline="false" />
            <Link label="删除" @click="onDelClick(row)" :underline="false" />
            <Link label="货品详情" @click="onGoodsDetailClick(row)" :underline="false" />
          </template>
        </el-table-column>
      </el-table>
      <Pager :page="goodData.search.page" :pageSizes="goodData.search.pageSizes" :total="goodData.total"
             :limit="goodData.search.limit" @current-change="onCurrentChange" @size-change="onSizeChange" />
    </div>
  </div>
  <el-image-viewer ref="previewViewer" v-if="showImageViewer" @close="closeImgView" :url-list="srcList" />
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import Pager from '@/components/pager/index.vue'
import Link from '@/components/button/link.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { calcTableHeight } from '@/utils/table'
import api from '@/api'
import router from '@/router'

const { tableRef, tableHeight } = calcTableHeight()
const loading = ref(false)
const previewViewer = ref()
const showImageViewer = ref(false)
const srcList = ref([])
const goodData = reactive({
  list: [],
  total: 0,
  pageSizes: [10, 20, 30],
  selected: [],
  search: {
    page: 1,
    limit: 10,
    goodsName: '',
    factoryName: '',
    producingArea: ''
  }
})
const loadData = async () => {
  loading.value = true
  const url = '/ruikeli/antiFake/goods/list'
  const { data, err } = await api.get(url, {
    goodsName: goodData.search.goodsName,
    limit: goodData.search.limit,
    page: goodData.search.page,
    factoryName: goodData.search.factoryName,
    producingArea: goodData.search.producingArea
  })
  if (err) {
    ElMessage.error(err)
  } else {
    goodData.total = data.count
    goodData.list = data.list
  }
  loading.value = false
}
const onAddGoodsClick = () => {
  router.push({ path: 'overview/addGoods' })
}
const onGoodsDetailClick = async (props) => {
  let { href } = router.resolve({
    path: `/overview/goodsDetail/${props.goodsId}`
  })
  window.open(href, '_blank')
}
const onEditClick = (props) => {
  let { href } = router.resolve({
    path: `/overview/edit/${props.goodsId}`
  })
  window.open(href, '_blank')
}
const onSearchClick = () => {
  loadData()
}
const onResetClick = () => {
  goodData.search.page = 1
  goodData.search.limit = 10
  goodData.search.goodsName = ''
  goodData.search.producingArea = ''
  goodData.search.factoryName = ''
  loadData()
}
const onDelClick = (props) => {
  ElMessageBox.confirm(
    `删除之后不可恢复 确定删除${props.goodsName}吗？`,
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    const url = `/ruikeli/antiFake/goods/delById?goodsId=${props.goodsId}`
    const { data, err } = await api.post(url)
    if (err) {
      ElMessage.error(err)
    } else {
      await loadData()
      ElMessage.success(`删除${props.goodsName}成功`)
    }
  })
}
const onShowImgClick = (url) => {
  srcList.value = [url]
  showImageViewer.value = true
}
const closeImgView = () => {
  showImageViewer.value = false
}
const onCurrentChange = (val) => {
  goodData.search.page = val
  loadData()
}
const onSizeChange = (val) => {
  goodData.search.limit = val
  loadData()
}

onMounted(() => {
  loadData()
})
</script>
<style scoped>
.el-form {
  margin-top: 10px;
}

.rejected {
  position: relative;
  padding-bottom: 3px;
}

.rejected::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-text);
}
</style>
<style>
.tooltip {
  max-width: 200px;
  max-height: 50px;
  padding: 15px 12px !important;
  line-height: 18px;
  box-shadow: 1px 1px 10px 3px #d3d3d6;
  font-size: 14px !important;
  color: var(--color-text) !important;
}
</style>

